<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MinerU 文档解析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .sidebar {
            transition: transform 0.3s ease;
        }
        .sidebar.collapsed {
            transform: translateX(-100%);
        }
        .main-content {
            transition: margin-left 0.3s ease;
        }
        .main-content.expanded {
            margin-left: 0;
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .hover-scale {
            transition: transform 0.2s ease;
        }
        .hover-scale:hover {
            transform: scale(1.02);
        }
        .task-card {
            transition: all 0.3s ease;
        }
        .task-card:hover {
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .nav-item {
            transition: all 0.2s ease;
        }
        .nav-item:hover {
            background-color: rgba(59, 130, 246, 0.1);
            border-left: 4px solid #3b82f6;
        }
        .nav-item.active {
            background-color: rgba(59, 130, 246, 0.15);
            border-left: 4px solid #3b82f6;
        }
        .modal {
            backdrop-filter: blur(5px);
        }
        .form-input {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .form-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            transform: translateY(-1px);
        }
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .status-processing {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .status-completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        .status-failed {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #3b82f6;
            background-color: #f8fafc;
        }
        .upload-area.dragover {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 主容器 -->
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div id="sidebar" class="sidebar w-64 bg-white shadow-lg flex-shrink-0">
            <div class="p-6">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                        <i class="fas fa-file-alt text-white text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-gray-800">MinerU 系统</h1>
                        <p class="text-sm text-gray-500">文档解析服务</p>
                    </div>
                </div>
            </div>
            
            <nav class="mt-6">
                <div class="px-4 space-y-1">
                    <a href="#" class="nav-item active flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('dashboard')">
                        <i class="fas fa-tachometer-alt w-5"></i>
                        <span>仪表板</span>
                    </a>
                    <a href="#" class="nav-item flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('upload')">
                        <i class="fas fa-upload w-5"></i>
                        <span>文档上传</span>
                    </a>
                    <a href="#" class="nav-item flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('tasks')">
                        <i class="fas fa-tasks w-5"></i>
                        <span>任务管理</span>
                    </a>
                    <a href="#" class="nav-item flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('slicing')">
                        <i class="fas fa-cut w-5"></i>
                        <span>文档切片</span>
                    </a>
                    <a href="#" class="nav-item flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('users')">
                        <i class="fas fa-users w-5"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="#" class="nav-item flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('logs')">
                        <i class="fas fa-history w-5"></i>
                        <span>调用日志</span>
                    </a>
                    <a href="#" class="nav-item flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg" onclick="showSection('settings')">
                        <i class="fas fa-cog w-5"></i>
                        <span>系统设置</span>
                    </a>
                </div>
            </nav>
            
            <div class="absolute bottom-0 w-64 p-4 border-t">
                <div class="flex items-center space-x-3">
                    <img src="/static/images/avatars/avatar_001.jpg" alt="用户头像" class="w-10 h-10 rounded-full" id="user-avatar">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-800">管理员</p>
                        <p class="text-xs text-gray-500">admin@system.com</p>
                    </div>
                    <button class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-sign-out-alt"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div id="mainContent" class="main-content flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white shadow-sm border-b border-gray-200">
                <div class="flex items-center justify-between px-6 py-4">
                    <div class="flex items-center space-x-4">
                        <button id="sidebarToggle" class="text-gray-500 hover:text-gray-700 lg:hidden">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                        <h2 id="pageTitle" class="text-2xl font-bold text-gray-800">仪表板</h2>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="relative p-2 text-gray-500 hover:text-gray-700">
                            <i class="fas fa-bell text-xl"></i>
                            <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>
                        <button class="p-2 text-gray-500 hover:text-gray-700">
                            <i class="fas fa-th-large text-xl"></i>
                        </button>
                    </div>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <main class="flex-1 overflow-y-auto p-6">
                <!-- 仪表板内容 -->
                <div id="dashboard" class="section fade-in">
                    <!-- 统计卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-sm p-6 hover-scale">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">今日解析</p>
                                    <p class="text-2xl font-bold text-gray-800">156</p>
                                    <p class="text-sm text-green-600 mt-1">
                                        <i class="fas fa-arrow-up"></i> 12%
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-blue-600 text-xl"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6 hover-scale">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">进行中任务</p>
                                    <p class="text-2xl font-bold text-gray-800">23</p>
                                    <p class="text-sm text-orange-600 mt-1">
                                        <i class="fas fa-minus"></i> 0%
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-clock text-orange-600 text-xl"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6 hover-scale">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">活跃用户</p>
                                    <p class="text-2xl font-bold text-gray-800">89</p>
                                    <p class="text-sm text-green-600 mt-1">
                                        <i class="fas fa-arrow-up"></i> 8%
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-users text-green-600 text-xl"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6 hover-scale">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">系统状态</p>
                                    <p class="text-2xl font-bold text-gray-800">正常</p>
                                    <p class="text-sm text-green-600 mt-1">
                                        <i class="fas fa-check-circle"></i> 运行中
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-server text-green-600 text-xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 图表区域 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">解析统计</h3>
                            <div class="h-64 flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fas fa-chart-line text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-gray-500">图表将在这里显示</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">系统资源</h3>
                            <div class="space-y-4">
                                <div>
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-sm text-gray-600">CPU 使用率</span>
                                        <span class="text-sm text-gray-800">45%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-sm text-gray-600">内存使用率</span>
                                        <span class="text-sm text-gray-800">62%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-green-600 h-2 rounded-full" style="width: 62%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-sm text-gray-600">磁盘使用率</span>
                                        <span class="text-sm text-gray-800">38%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-orange-600 h-2 rounded-full" style="width: 38%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近任务 -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-gray-800">最近任务</h3>
                            <a href="#" class="text-blue-600 hover:text-blue-800 text-sm" onclick="showSection('tasks')">查看全部</a>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b">
                                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">任务ID</th>
                                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">文件名</th>
                                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">状态</th>
                                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">进度</th>
                                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">创建时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b hover:bg-gray-50">
                                        <td class="py-3 px-4 text-sm text-gray-800">TASK_001</td>
                                        <td class="py-3 px-4 text-sm text-gray-800">report.pdf</td>
                                        <td class="py-3 px-4">
                                            <span class="status-badge status-completed">
                                                <i class="fas fa-check-circle mr-1"></i>完成
                                            </span>
                                        </td>
                                        <td class="py-3 px-4">
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
                                            </div>
                                        </td>
                                        <td class="py-3 px-4 text-sm text-gray-600">2024-01-15 10:30</td>
                                    </tr>
                                    <tr class="border-b hover:bg-gray-50">
                                        <td class="py-3 px-4 text-sm text-gray-800">TASK_002</td>
                                        <td class="py-3 px-4 text-sm text-gray-800">document.docx</td>
                                        <td class="py-3 px-4">
                                            <span class="status-badge status-processing">
                                                <i class="fas fa-spinner fa-spin mr-1"></i>处理中
                                            </span>
                                        </td>
                                        <td class="py-3 px-4">
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-blue-600 h-2 rounded-full progress-bar" style="width: 75%"></div>
                                            </div>
                                        </td>
                                        <td class="py-3 px-4 text-sm text-gray-600">2024-01-15 10:45</td>
                                    </tr>
                                    <tr class="border-b hover:bg-gray-50">
                                        <td class="py-3 px-4 text-sm text-gray-800">TASK_003</td>
                                        <td class="py-3 px-4 text-sm text-gray-800">presentation.pptx</td>
                                        <td class="py-3 px-4">
                                            <span class="status-badge status-pending">
                                                <i class="fas fa-clock mr-1"></i>等待中
                                            </span>
                                        </td>
                                        <td class="py-3 px-4">
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-orange-600 h-2 rounded-full" style="width: 0%"></div>
                                            </div>
                                        </td>
                                        <td class="py-3 px-4 text-sm text-gray-600">2024-01-15 11:00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 文档上传内容 -->
                <div id="upload" class="section hidden">
                    <div class="max-w-4xl mx-auto">
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">上传文档</h3>
                            
                            <!-- 上传区域 -->
                            <div id="uploadArea" class="upload-area mb-6">
                                <div class="mb-4">
                                    <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
                                    <p class="text-lg text-gray-600 mb-2">拖拽文件到这里或点击选择</p>
                                    <p class="text-sm text-gray-500">支持 PDF、Word、Excel、PPT 格式</p>
                                </div>
                                <input type="file" id="fileInput" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
                                <button onclick="document.getElementById('fileInput').click()" class="btn-primary text-white px-6 py-2 rounded-lg">
                                    <i class="fas fa-folder-open mr-2"></i>选择文件
                                </button>
                            </div>
                            
                            <!-- 文件列表 -->
                            <div id="fileList" class="space-y-3 mb-6"></div>
                            
                            <!-- 解析选项 -->
                            <div class="border-t pt-6">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">解析选项</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">执行模式</label>
                                        <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="sync">同步执行</option>
                                            <option value="async">异步执行</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">输出格式</label>
                                        <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="all">全部格式</option>
                                            <option value="text">纯文本</option>
                                            <option value="markdown">Markdown</option>
                                            <option value="layout">布局信息</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">语言识别</label>
                                        <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="auto">自动识别</option>
                                            <option value="zh">中文</option>
                                            <option value="en">英文</option>
                                            <option value="mixed">混合语言</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">OCR引擎</label>
                                        <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="paddle">PaddleOCR</option>
                                            <option value="tesseract">Tesseract</option>
                                            <option value="rapid">RapidOCR</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 提交按钮 -->
                            <div class="flex justify-end mt-6 space-x-3">
                                <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                                    清空
                                </button>
                                <button onclick="startUpload()" class="btn-primary text-white px-6 py-2 rounded-lg">
                                    <i class="fas fa-play mr-2"></i>开始解析
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务管理内容 -->
                <div id="tasks" class="section hidden">
                    <div class="mb-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold text-gray-800">任务管理</h3>
                            <div class="flex space-x-3">
                                <select class="form-input px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="">全部状态</option>
                                    <option value="pending">等待中</option>
                                    <option value="processing">处理中</option>
                                    <option value="completed">已完成</option>
                                    <option value="failed">失败</option>
                                </select>
                                <button class="btn-primary text-white px-4 py-2 rounded-lg">
                                    <i class="fas fa-filter mr-2"></i>筛选
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 任务列表 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 任务卡片 1 -->
                        <div class="task-card bg-white rounded-xl shadow-sm p-6">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <h4 class="font-semibold text-gray-800">report.pdf</h4>
                                    <p class="text-sm text-gray-500 mt-1">TASK_001</p>
                                </div>
                                <span class="status-badge status-completed">
                                    <i class="fas fa-check-circle mr-1"></i>完成
                                </span>
                            </div>
                            <div class="mb-4">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm text-gray-600">进度</span>
                                    <span class="text-sm text-gray-800">100%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
                                </div>
                            </div>
                            <div class="text-sm text-gray-600 mb-4">
                                <p><i class="fas fa-file mr-2"></i>2.5 MB</p>
                                <p><i class="fas fa-clock mr-2"></i>2024-01-15 10:30</p>
                            </div>
                            <div class="flex space-x-2">
                                <button class="flex-1 bg-blue-50 text-blue-600 px-3 py-2 rounded-lg hover:bg-blue-100 text-sm">
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="flex-1 bg-green-50 text-green-600 px-3 py-2 rounded-lg hover:bg-green-100 text-sm">
                                    <i class="fas fa-cut mr-1"></i>切片
                                </button>
                                <button class="flex-1 bg-gray-50 text-gray-600 px-3 py-2 rounded-lg hover:bg-gray-100 text-sm">
                                    <i class="fas fa-eye mr-1"></i>查看
                                </button>
                            </div>
                        </div>
                        
                        <!-- 任务卡片 2 -->
                        <div class="task-card bg-white rounded-xl shadow-sm p-6">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <h4 class="font-semibold text-gray-800">document.docx</h4>
                                    <p class="text-sm text-gray-500 mt-1">TASK_002</p>
                                </div>
                                <span class="status-badge status-processing">
                                    <i class="fas fa-spinner fa-spin mr-1"></i>处理中
                                </span>
                            </div>
                            <div class="mb-4">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm text-gray-600">进度</span>
                                    <span class="text-sm text-gray-800">75%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div>
                                </div>
                            </div>
                            <div class="text-sm text-gray-600 mb-4">
                                <p><i class="fas fa-file mr-2"></i>1.8 MB</p>
                                <p><i class="fas fa-clock mr-2"></i>2024-01-15 10:45</p>
                            </div>
                            <div class="flex space-x-2">
                                <button class="flex-1 bg-gray-50 text-gray-400 px-3 py-2 rounded-lg text-sm cursor-not-allowed" disabled>
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="flex-1 bg-gray-50 text-gray-400 px-3 py-2 rounded-lg text-sm cursor-not-allowed" disabled>
                                    <i class="fas fa-cut mr-1"></i>切片
                                </button>
                                <button class="flex-1 bg-blue-50 text-blue-600 px-3 py-2 rounded-lg hover:bg-blue-100 text-sm">
                                    <i class="fas fa-eye mr-1"></i>查看
                                </button>
                            </div>
                        </div>
                        
                        <!-- 任务卡片 3 -->
                        <div class="task-card bg-white rounded-xl shadow-sm p-6">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <h4 class="font-semibold text-gray-800">presentation.pptx</h4>
                                    <p class="text-sm text-gray-500 mt-1">TASK_003</p>
                                </div>
                                <span class="status-badge status-pending">
                                    <i class="fas fa-clock mr-1"></i>等待中
                                </span>
                            </div>
                            <div class="mb-4">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm text-gray-600">进度</span>
                                    <span class="text-sm text-gray-800">0%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-orange-600 h-2 rounded-full" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="text-sm text-gray-600 mb-4">
                                <p><i class="fas fa-file mr-2"></i>3.2 MB</p>
                                <p><i class="fas fa-clock mr-2"></i>2024-01-15 11:00</p>
                            </div>
                            <div class="flex space-x-2">
                                <button class="flex-1 bg-gray-50 text-gray-400 px-3 py-2 rounded-lg text-sm cursor-not-allowed" disabled>
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="flex-1 bg-gray-50 text-gray-400 px-3 py-2 rounded-lg text-sm cursor-not-allowed" disabled>
                                    <i class="fas fa-cut mr-1"></i>切片
                                </button>
                                <button class="flex-1 bg-blue-50 text-blue-600 px-3 py-2 rounded-lg hover:bg-blue-100 text-sm">
                                    <i class="fas fa-eye mr-1"></i>查看
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 文档切片内容 -->
                <div id="slicing" class="section hidden">
                    <div class="max-w-4xl mx-auto">
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">文档切片</h3>
                            
                            <!-- 任务选择 -->
                            <div class="mb-6">
                                <label class="block text-sm font-medium text-gray-700 mb-2">选择已解析的任务</label>
                                <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="">请选择任务</option>
                                    <option value="TASK_001">TASK_001 - report.pdf</option>
                                    <option value="TASK_002">TASK_002 - document.docx</option>
                                    <option value="TASK_003">TASK_003 - presentation.pptx</option>
                                </select>
                            </div>
                            
                            <!-- 切片策略 -->
                            <div class="mb-6">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">切片策略</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">切片策略</label>
                                        <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="semantic">语义切片</option>
                                            <option value="paragraph">段落切片</option>
                                            <option value="fixed">固定长度切片</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">切片大小</label>
                                        <input type="number" value="1000" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">重叠大小</label>
                                        <input type="number" value="200" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">最小切片大小</label>
                                        <input type="number" value="100" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 高级选项 -->
                            <div class="mb-6">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">高级选项</h4>
                                <div class="space-y-3">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                        <span class="ml-2 text-sm text-gray-700">保留章节结构</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                        <span class="ml-2 text-sm text-gray-700">提取表格内容</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                        <span class="ml-2 text-sm text-gray-700">处理图像描述</span>
                                    </label>
                                </div>
                            </div>
                            
                            <!-- 提交按钮 -->
                            <div class="flex justify-end space-x-3">
                                <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                                    预览切片
                                </button>
                                <button class="btn-primary text-white px-6 py-2 rounded-lg">
                                    <i class="fas fa-cut mr-2"></i>开始切片
                                </button>
                            </div>
                        </div>
                        
                        <!-- 切片结果预览 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h4 class="text-md font-semibold text-gray-800 mb-4">切片结果预览</h4>
                            <div class="space-y-4">
                                <div class="border rounded-lg p-4">
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-sm font-medium text-gray-700">切片 1</span>
                                        <span class="text-sm text-gray-500">字数: 156</span>
                                    </div>
                                    <p class="text-sm text-gray-600 line-clamp-3">
                                        这是一个示例切片内容，展示了文档切片的效果。切片后的内容可以直接用于RAG系统的向量化和检索...
                                    </p>
                                </div>
                                <div class="border rounded-lg p-4">
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-sm font-medium text-gray-700">切片 2</span>
                                        <span class="text-sm text-gray-500">字数: 203</span>
                                    </div>
                                    <p class="text-sm text-gray-600 line-clamp-3">
                                        这是第二个切片内容，与第一个切片有一定的重叠，确保上下文信息的完整性...
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户管理内容 -->
                <div id="users" class="section hidden">
                    <div class="mb-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold text-gray-800">用户管理</h3>
                            <button onclick="showUserModal()" class="btn-primary text-white px-4 py-2 rounded-lg">
                                <i class="fas fa-plus mr-2"></i>添加用户
                            </button>
                        </div>
                    </div>
                    
                    <!-- 用户列表 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">邮箱</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img src="/static/images/avatars/avatar_001.jpg" alt="用户头像" class="w-10 h-10 rounded-full">
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">admin</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">admin@system.com</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">管理员</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">活跃</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-01</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="text-indigo-600 hover:text-indigo-900 mr-3">编辑</button>
                                        <button class="text-red-600 hover:text-red-900">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img src="/static/images/avatars/avatar_002.jpg" alt="用户头像" class="w-10 h-10 rounded-full">
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">user1</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user1@example.com</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">用户</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">活跃</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-05</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="text-indigo-600 hover:text-indigo-900 mr-3">编辑</button>
                                        <button class="text-red-600 hover:text-red-900">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 调用日志内容 -->
                <div id="logs" class="section hidden">
                    <div class="mb-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold text-gray-800">调用日志</h3>
                            <div class="flex space-x-3">
                                <input type="date" class="form-input px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <button class="btn-primary text-white px-4 py-2 rounded-lg">
                                    <i class="fas fa-search mr-2"></i>搜索
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 日志列表 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">接口</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">方法</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">响应时间</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-15 10:30:15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">admin</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">/api/v1/parse/sync</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">POST</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">200</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.3s</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-15 10:28:42</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user1</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">/api/v1/parse/async</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">POST</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">200</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.5s</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 系统设置内容 -->
                <div id="settings" class="section hidden">
                    <div class="max-w-4xl mx-auto">
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-6">系统设置</h3>
                            
                            <!-- 认证设置 -->
                            <div class="mb-8">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">认证设置</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Token过期时间（秒）</label>
                                        <input type="number" value="3600" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">最大并发用户</label>
                                        <input type="number" value="100" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 解析设置 -->
                            <div class="mb-8">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">解析设置</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">最大文件大小（MB）</label>
                                        <input type="number" value="50" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">最大并发任务</label>
                                        <input type="number" value="10" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">任务超时时间（秒）</label>
                                        <input type="number" value="300" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">默认OCR引擎</label>
                                        <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="paddle">PaddleOCR</option>
                                            <option value="tesseract">Tesseract</option>
                                            <option value="rapid">RapidOCR</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 存储设置 -->
                            <div class="mb-8">
                                <h4 class="text-md font-semibold text-gray-800 mb-4">存储设置</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">上传文件保留天数</label>
                                        <input type="number" value="30" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">解析结果保留天数</label>
                                        <input type="number" value="90" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 保存按钮 -->
                            <div class="flex justify-end">
                                <button class="btn-primary text-white px-6 py-2 rounded-lg">
                                    <i class="fas fa-save mr-2"></i>保存设置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- 用户模态框 -->
    <div id="userModal" class="modal fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">添加用户</h3>
                <button onclick="hideUserModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                    <input type="text" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                    <input type="email" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                    <input type="password" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">角色</label>
                    <select class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="user">用户</option>
                        <option value="admin">管理员</option>
                    </select>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="hideUserModal()" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                        取消
                    </button>
                    <button type="submit" class="btn-primary text-white px-6 py-2 rounded-lg">
                        添加用户
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 侧边栏切换
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('expanded');
        });
        
        // 显示不同的部分
        function showSection(sectionId) {
            // 隐藏所有部分
            document.querySelectorAll('.section').forEach(section => {
                section.classList.add('hidden');
            });
            
            // 显示选中的部分
            document.getElementById(sectionId).classList.remove('hidden');
            
            // 更新页面标题
            const titles = {
                'dashboard': '仪表板',
                'upload': '文档上传',
                'tasks': '任务管理',
                'slicing': '文档切片',
                'users': '用户管理',
                'logs': '调用日志',
                'settings': '系统设置'
            };
            document.getElementById('pageTitle').textContent = titles[sectionId];
            
            // 更新导航状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.closest('.nav-item').classList.add('active');
        }
        
        // 用户模态框
        function showUserModal() {
            document.getElementById('userModal').classList.remove('hidden');
            document.getElementById('userModal').classList.add('flex');
        }
        
        function hideUserModal() {
            document.getElementById('userModal').classList.add('hidden');
            document.getElementById('userModal').classList.remove('flex');
        }
        
        // 文件上传功能
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const fileList = document.getElementById('fileList');
        
        // 拖拽上传
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            handleFiles(files);
        });
        
        // 文件选择
        fileInput.addEventListener('change', function(e) {
            const files = e.target.files;
            handleFiles(files);
        });
        
        // 处理文件
        function handleFiles(files) {
            fileList.innerHTML = '';
            for (let file of files) {
                const fileItem = document.createElement('div');
                fileItem.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg';
                fileItem.innerHTML = `
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-alt text-gray-500"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-800">${file.name}</p>
                            <p class="text-xs text-gray-500">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
                        </div>
                    </div>
                    <button class="text-red-500 hover:text-red-700" onclick="removeFile(this)">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                fileList.appendChild(fileItem);
            }
        }
        
        // 移除文件
        function removeFile(button) {
            button.closest('.flex').remove();
        }
        
        // 开始上传
        function startUpload() {
            const files = fileInput.files;
            if (files.length === 0) {
                alert('请选择文件');
                return;
            }
            
            // 模拟上传过程
            alert('文件上传成功！正在解析...');
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 显示仪表板
            showSection('dashboard');
        });
    </script>
</body>
</html>